<template>
  <div class="dialog-form">
    <el-dialog v-model="formVisible" :title="pageTitle + '房间'" @close="onClickCloseBtn">
      <div class="dialogCenter">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="房间号：" prop="code">
            <el-input v-model="formData.code" :maxlength="5" class="wt-400" clearable placeholder="请输入"
                      show-limit-number/>
          </el-form-item>
          <el-form-item label="房间类型：" prop="typeName">
            <el-select v-model="formData.typeName" clearable filterable placeholder="请选择">
              <el-option v-for="(item, index) in roomTypeData" :key="index" :label="item.name" :value="item.name"
                         title="">{{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input-number v-model="formData.sort" :decimal-places="0" :max="maxNumber" :min="minNumber" large-number
                             @blur="textBlurNo" @change="textBlurNo"/>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="onClickCloseBtn">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
const {proxy} = getCurrentInstance();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  houseTypeData: {
    type: Array,
    default: () => {
      return []
    }
  },
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  minNumber: {
    type: Number,
    default: 1
  },
  maxNumber: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: '新增'
  },
  roomTypeData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits([
  'handleClose',
  'fetchData',
  'handleAdd',
  'handleEdit'
])
const resetType = ref('empty')
const formVisible = ref(false)
const formRef = ref(null)

const formData = ref({
  code: '',
  sort: 1,
  typeName: ''
})

const rules = {
  code: [
    {
      required: true,
      message: '房间号为空，请输入房间号',
      trigger: 'blur'
    }
  ],
  typeName: [
    {
      required: true,
      message: '房间类型为空，请选择房间类型',
      trigger: 'change'
    }
  ],
  sort: [
    {
      required: true,
      message: '排序为空，请输入排序',
      trigger: 'blur'
    }
  ]
}

const pageTitle = ref()

watch(props, (val) => {
  formVisible.value = val.visible
  pageTitle.value = val.title
})

watch(
    () => props.data,
    (val) => {
      formData.value.id = val.id
      formData.value.typeName = val.typeName
      formData.value.sort = val.sort
      formData.value.code = val.code
    }
)

// 提交表单
const onSubmit = () => {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      if (props.title === '新增') {
        emit('handleAdd', formData.value)
      } else {
        emit('handleEdit', formData.value)
      }
    }
  });
}

// 清除表单数据
const handleClear = () => {
  formRef.value.resetFields();
  formData.value.sort = 1
}

// 点击取消关闭
const onClickCloseBtn = () => {
  handleClear()
  emit('handleClose')
}

// 监听排序
const textBlurNo = () => {
  const data = Number(formData.value.sort)
  if (data <= 1) {
    formData.value.sort = 1
  }
  if (data > 99999999) {
    formData.value.sort = 99999999
  }
}

defineExpose({
  handleClear
})
</script>
